<template>
  <div class="user-management">
    <div class="card">
      <div class="card-header">
        <h2>用户管理</h2>
        <div class="search-filter">
          <input type="text" placeholder="搜索用户ID或名称..." v-model="searchQuery">
          <button @click="searchUsers"><i class="icon-search"></i></button>
        </div>
      </div>

      <div class="table-container">
        <table>
          <thead>
          <tr>
            <th>用户ID</th>
            <th>用户名</th>
            <th>邮箱</th>
            <th>注册时间</th>
            <th>状态</th>
            <th>操作</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="user in users" :key="user.uid">
            <td>{{ user.uid }}</td>
            <td>{{ user.username }}</td>
            <td>{{ user.email }}</td>
            <td>{{ $formatDate(user.registerTime) }}</td>
            <td>
                <span :class="['status', {'banned': user.status === 2}]">
                  {{ user.status === 2 ? '已封禁' : '正常' }}
                </span>
            </td>
            <td>
              <button
                  v-if="user.status !== 2"
                  class="btn-ban"
                  @click="banUser(user.uid)"
              >
                封禁
              </button>
              <button
                  v-else
                  class="btn-unban"
                  @click="unbanUser(user.uid)"
              >
                解封
              </button>
            </td>
          </tr>
          </tbody>
        </table>
      </div>

      <div class="pagination">
        <button @click="prevPage" :disabled="currentPage === 1">
          <i class="icon-chevron-left"></i>
        </button>
        <span>第 {{ currentPage }} 页</span>
        <button @click="nextPage" :disabled="users.length < pageSize">
          <i class="icon-chevron-right"></i>
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import {format, formatDate} from 'date-fns';
import { ElMessage } from 'element-plus'

export default {
  name: 'UserManagement',
  data() {
    return {
      searchQuery: '',
      users: [],
      currentPage: 1,
      pageSize: 10
    }
  },
  created() {
    this.fetchUsers();
  },
// 修改UserManagement.vue中的方法
  methods: {
    formatDate,
    async fetchUsers(uid = null) {
      try {
        if (uid) {
          const response = await this.$http.get(`/admin/queryUser/${uid}`)
          this.users = response.data // 注意访问response.data
        } else {
          const response = await this.$http.get('/admin/allUser')
          this.users = response.data // 注意访问response.data
        }
      } catch (error) {
        console.error('获取用户列表失败:', error)
        this.$message.error('获取用户列表失败')
      }
    },

    async banUser(uid) {
      if (confirm('确定要封禁此用户吗？')) {
        try {
          await this.$http.put('/admin/banUser', null, {
            params: { uid, aid: 1 } // 使用查询参数
          })
          this.fetchUsers()
          this.$message.success('用户封禁成功')
        } catch (error) {
          console.error('封禁用户失败:', error)
          this.$message.error('封禁用户失败')
        }
      }
    },

    async unbanUser(uid) {
      try {
        // 假设解封接口与封禁相同，只是status改为1
        // 如果没有解封接口，需要在前端处理状态
        await this.$http.put('/api/admin/unBanUser', null, {
          params: { uid, aid: 1 }
        })
        this.fetchUsers()
        this.$message.success('用户解封成功')
      } catch (error) {
        console.error('解封用户失败:', error)
        this.$message.error('解封用户失败')
      }
    }
  }
}
</script>

<style scoped>
.user-management {
  padding: 20px;
}

.card {
  background-color: white;
  border-radius: 6px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #e0e0e0;
}

.card-header h2 {
  margin: 0;
  color: #455a64;
}

.search-filter {
  display: flex;
}

.search-filter input {
  padding: 8px 15px;
  border: 1px solid #e0e0e0;
  border-radius: 4px 0 0 4px;
  width: 250px;
}

.search-filter button {
  padding: 0 15px;
  background-color: #1976d2;
  color: white;
  border: none;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
}

.table-container {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #e0e0e0;
}

th {
  background-color: #f5f7fa;
  color: #607d8b;
  font-weight: 500;
}

.status {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  background-color: #4caf50;
  color: white;
}

.status.banned {
  background-color: #f44336;
}

.btn-ban, .btn-unban {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
}

.btn-ban {
  background-color: #f44336;
  color: white;
}

.btn-unban {
  background-color: #4caf50;
  color: white;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  gap: 15px;
}

.pagination button {
  width: 32px;
  height: 32px;
  border: 1px solid #e0e0e0;
  background-color: white;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pagination span {
  color: #607d8b;
}
</style>